<template>
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
  <el-form-item label="父分类"  prop="pfId" align="left">
    <el-cascader v-model="ruleForm.pfId"
      :options="options"
     :props="{ checkStrictly: true }"
    clearable :show-all-levels="false"
    disabled></el-cascader>
  </el-form-item>
  <el-form-item label="分类名称" required>
    <el-col :span="11">
      <el-form-item prop="pName">
        <el-input v-model="ruleForm.pName" placeholder="请输入分类名称"></el-input>
    </el-form-item>
    </el-col>
    <el-col class="line" :span="2">分类排序</el-col>
    <el-col :span="11">
      <el-form-item prop="psort">
       <el-input-number v-model="ruleForm.psort" controls-position="right" :min="1" :max="5"></el-input-number>
    </el-form-item>
    </el-col>
  </el-form-item>
  <el-form-item label="物料/产品" required>
    <el-col :span="11">
      <el-form-item prop="pYesNoEnable">
    <el-radio v-model="ruleForm.pYesNoEnable" :label="0">物料</el-radio>
    <el-radio v-model="ruleForm.pYesNoEnable" :label="1">产品</el-radio>
    </el-form-item>
    </el-col>
    <el-col class="line" :span="2">是否启用</el-col>
    <el-col :span="11">
      <el-form-item prop="pYesNoQiYun">
       <el-radio v-model="ruleForm.pYesNoQiYun" :label="0">启用</el-radio>
        <el-radio v-model="ruleForm.pYesNoQiYun" :label="1">禁用</el-radio>
    </el-form-item>
    </el-col>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="submitForm('ruleForm')">确定</el-button>
    <el-button @click="resetForm('ruleForm')">取消</el-button>
  </el-form-item>
</el-form>
</template>

<script>
  export default {
    props: {
      PId: null,
  },
    data() {
      return {
        options:[],
        ruleForm: {
          pName: "",
          pfId: 0,
          psort: 1,
          pYesNoQiYun: 1,
          pYesNoEnable: 1,
        },
        rules: {
          pName: [
            { required: true, message: '请输入活动名称', trigger: 'blur' },
          ],
          psort: [
          { required: true, message: '请输入排序', trigger: 'blur' },
          ],
          pYesNoEnable: [
          { required: true, message: '请输入活动名称', trigger: 'blur' },
          ],
        }
      };
    },
    methods: {
      handleChange(value) {
        console.log(value);
      },
      JLXshow(){
      this.axios.get("http://localhost:5255/api/Material/XLKProducts?PId=0").then(res=>{
      this.options = res.data.Data;
      this.ruleForm.pfId = this.PId;
      console.log(this.options);
      })
      },
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            
            this.axios.post("http://localhost:5255/api/Material/AddProducts",this.ruleForm).then(res=>{
              if(res.data){
                this.$message.success("添加成功");
                this.$emit("CloseProAdd");
              }
              else{
                this.$message.success("添加失败");
              }
              
            })
            
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      }
    },
    created(){
      this.JLXshow();
    }
  }
</script>